<template>
  <div>
    <button ref="ccc" @click="cccClick">ref-ccccccccc</button>
    <hr>
    <div class="box">
      <HelloWorld ref="helloworld" msg="vue3---HelloWorld"></HelloWorld>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, Ref, nextTick } from 'Vue'
  import HelloWorld from '@/components/HelloWorld.vue'

  // 定义 ref 类型----方法 1
  let aaa = ref<number>(111)
  console.log( aaa );
  setTimeout(() => {
    aaa.value = 'aaa'
  }, 1000);

  // 定义 ref 类型----方法 2
  let bbb: Ref<number> = ref(222)
  console.log( bbb );
  setTimeout(() => {
    bbb.value = 'bbb'
  }, 1000);


  // 获取 dom 
  let ccc = ref<HTMLElement| null>(null)
  nextTick(() => {
    console.log( 'ccc', ccc.value);
    // 自动触发点击
    ccc.value?.click()
  })

  let cccClick = (): void => {
    console.log( 'cccccccc' );
  }


  // 湖片区 组件 实例------InstanceType<typeof component_aaa>
  let helloworld = ref< InstanceType<typeof HelloWorld> >();
  // let helloworld = ref<HTMLElement | null>(null);
  nextTick(() => {
    console.log( 'helloworld', helloworld.value?.msg );
  })
</script>

<style lang="scss" scoped>
.box{
  outline: 1px solid red;
  padding: 5px;
}
</style>